<template>
  <div>
    <div class="form-box">
      <div class="send">发送内容</div>
      <el-form :model="form" label-position="left" ref="form" label-width="100px">
        <el-form-item label="提示语" required>
          <el-input v-model="form.data.first"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" required>
          <el-input v-model="form.data.keyword1"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" required>
          <el-input v-model="form.data.keyword2"></el-input>
        </el-form-item>
        <el-form-item label="地址" required>
          <el-input v-model="form.data.keyword3"></el-input>
        </el-form-item>
        <el-form-item label="结束语" required>
          <el-input v-model="form.data.remark"></el-input>
        </el-form-item>
        <hr>
        <div class="send send-1">发送目标</div>
        <el-form-item label="用户名称搜索">
          <el-input
          placeholder="请输入搜索用户名称"
          class="input"
          name="fans"
          clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索用户</el-button>
        </el-form-item>
        <el-form-item label="客户名称" required>
          <el-select v-model="form.openid">
            <el-option :label="item.name" :value="item.openid" :key="index" v-for="(item, index) in fans_list"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校名称搜索" v-if="!test">
          <el-input
            placeholder="请输入搜索学校名称"
            class="input"
            name="school"
            clearable>
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="schoolsearch">搜索学校</el-button>
        </el-form-item>
        <el-form-item label="学校名称" v-if="!test" required>
          <el-select v-model="form.school_id">
            <el-option :label="item.school_name" :value="item.id" :key="index" v-for="(item, index) in school_list"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否购买服务" v-if="!test" required>
          <el-select v-model="form.service">
            <el-option label="购买服务学生" value="1"></el-option>
            <el-option label="全部学生" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form', 0)">个人信息发送</el-button>
          <el-button type="warning" v-if="!test" @click="submitForm('form', 1)">学校信息发送</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      fans_id: undefined,
      fans_list: [],
      select_fans: undefined,
      form: {
        openid: undefined,
        data: [
          {first: undefined},
          {keyword1: undefined},
          {keyword2: undefined},
          {keyword3: undefined},
          {remark: undefined}
        ],
        school_id: undefined,
        service: undefined
      },
      school_list: [],
      test: true
    }
  },
  methods: {
    search () {
      let fans_name = document.getElementsByTagName('input')['fans'].value
      APP.ajax('fans/list', { name: fans_name }, res => {
        this.fans_list = res.data.data.data
      })
    },
    submitForm (formName, index) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (index === 1) {
            APP.ajax('post@school/send', this.form, res => {
              if (res.data.status === 200) {
                this.$message({
                  message: '有' + res.data.data + '个学生接收消息成功!',
                  type: 'success'
                })
              }
            })
          } else {
            let params = {
              openid: this.form.openid,
              data: {
                first: this.form.data.first,
                keyword1: this.form.data.keyword1,
                keyword2: this.form.data.keyword2,
                keyword3: this.form.data.keyword3,
                remark: this.form.data.remark
              }
            }
            APP.ajax('post@school/testSend', params, res => {
              if (res.data.status === 200) {
                this.$message({
                  message: '消息发送成功',
                  type: 'success'
                })
                this.test = false
              }
            })
          }
        } else {
          console.log('error submit')
        }
      })
    },
    schoolsearch () {
      let school_name = document.getElementsByTagName('input')['school'].value
      let params = {
        province: '',
        city: '',
        area: '',
        school_name: school_name
      }
      APP.ajax('post@school/search', params, res => {
        this.school_list = res.data.data.data
      })
    }
  }
}
</script>
<style scoped>
  .input{
    width: 200px;
  }
  .send{
    margin-bottom: 20px;
    color: #67C23A;
  }
  .send-1{
    margin-top: 20px;
  }
</style>

